export const baseUsage = `
import {
    PhValidator,
    PhForm,
    PhFormNumberRange,
    PhFormDatetimeCascade,
    PhFormDatetimeRange,
    PhFormDatetime,
    PhFormGroup,
    PhFormTextarea,
    PhFormInput,
    PhFormSelect,
    PhFormSwitch,
    PhFormColor,
    PhFormCheckbox,
    PhFormRadio,
    PhOption,
    PhCheckboxItem,
    PhRadioItem,
} from 'ph-form'
interface Form{
    type:{
        type:String //表格的样式风格<none 纯白|plain 灰白>
    }
}
`;
export const script = `<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from "vue";

import {
  PhForm,
  PhValidator,
  PhFormNumberRange,
  PhFormDatetimeCascade,
  PhFormDatetimeRange,
  PhFormDatetime,
  PhFormGroup,
  PhFormTextarea,
  PhFormInput,
  PhFormSelect,
  PhFormSwitch,
  PhFormColor,
  PhFormCheckbox,
  PhFormRadio,
  PhOption,
  PhCheckboxItem,
  PhRadioItem,
  
} from "ph-form";
import PhToast from 'ph-toast'
import PhModel from 'ph-modal'
import { PhModal } from "@/components";
export default defineComponent({
  components: {
    PhForm,
    PhFormNumberRange,
    PhFormDatetimeCascade,
    PhFormDatetimeRange,
    PhFormDatetime,
    PhValidator,
    PhFormGroup,
    PhFormTextarea,
    PhFormInput,
    PhFormSelect,
    PhFormSwitch,
    PhFormColor,
    PhFormCheckbox,
    PhFormRadio,
    PhOption,
    PhCheckboxItem,
    PhRadioItem,
    PhButton,
    PhButtonGroup,
  },
  setup() {
    const formdata = reactive<Record<string, any>>({
      intro:"",
      account: "",
      gender: 0,
      salary: [],
      duty: [],
      email: "",
      profile: "",
      color: "#FF00FF",
      birth: "",
      married: false,
      uni: 1,
      fpros: [2, 4],
      pro: [1],
      sx: [2]
    });
    const datesource = {
      unis: [
        {
          value: 1,
          text: "宁夏大学",
        },
        {
          value: 2,
          text: "厦门大学",
        },
        {
          value: 3,
          text: "宁波大学",
        },
        {
          value: 4,
          text: "清华大学",
        },
        {
          value: 5,
          text: "北京大学",
        },
      ],
      
      sxs: [
        {
          value: 1,
          text: "康家沟小学",
        },
        {
          value: 2,
          text: "张家界小学",
        },
        {
          value: 3,
          text: "贵族小学",
        },
      ],
      
      pros: [
        {
          value: 0,
          text: "法师",
        },
        {
          value: 1,
          text: "佛缘",
        },
        {
          value: 2,
          text: "达文西",
        },
        {
          value: 3,
          text: "007",
        },
        {
          value: 4,
          text: "达尔文",
        },
        {
          value: 5,
          text: "阿娜达",
        },
      ],
    }
    const formStyle = ref<string | null>(null);
    const validator = ref<InstanceType<typeof PhValidator>>()
    const onSubmit = ()=>{
      validator.value?.validateForm().then(()=>{
        PhModal.alert(JSON.stringify(formdata,null,4))
        console.log(formdata)
      }).catch(()=>{
        PhToast.danger("请完善表单内容")
      })
    }
    return {
      ...toRefs(formdata),
      ...datesource,
      formStyle,
      validator,
      onSubmit
    };
  },
});
</script>
`;
export const template = `<ph-form>
<ph-validator ref="validator">
<ph-form-group>
    <ph-form-input
    :block="false"
    v-model="account"
    label="账户名"
    placeholder="required"
    :validators="['required']"
    
    />
    <ph-form-input
    :block="false"
    v-model="email"
    label="邮箱"
    placeholder="email"
    :validators="['email']"
    />
    <ph-form-input
    :block="false"
    placeholder="测试警用"
    label="禁用"
    :disabled="true"
    />
    <ph-form-number-range
    
    label="期望月薪(k)"
    placeholderStart="下限"
    placeholderEnd="上限"
    :validators="['required']"
    :block="false"
    v-model="salary"
    />
</ph-form-group>
<ph-form-datetime-cascade
    label="任职日期"
    type="date"
    :validators="['required']"
    v-model="duty"
    placeholderStart="开始日期"
    placeholderEnd="结束日期"
/>
<ph-form-datetime-cascade
    label="测试禁止"
    type="date"
    :disabled="true"
    :validators="['required']"
    placeholderStart="开始日期"
    placeholderEnd="结束日期"
/>
<ph-form-datetime-range
    label="任职日期"
    type="date"
    v-model="duty"
    placeholderStart="开始日期"
    placeholderEnd="结束日期"
/>
<ph-form-input
    v-model="profile"
    label="个人主页"
    :validators="['url']"
/>
<ph-form-radio
    label="性别"
    v-model="gender"
    
>
    <ph-radio-item :value="0">男</ph-radio-item>
    <ph-radio-item :value="1">女</ph-radio-item>
</ph-form-radio>
<ph-form-select
    label="喜欢的职业"
    placeholder="可以配置"
    v-model="fpros"
    :multiple="true"
    :validators="['required']"
>
    <ph-option
    :value="opt.value"
    v-for="opt in pros"
    :key="opt.value"
    >{{ opt.text }}</ph-option
    >
</ph-form-select>
<ph-form-switch
    label="婚否"
    v-model="married"
    
/>
<ph-form-color
    label="喜欢的颜色"
    v-model="color"
    
    :disabled="false"
    :validators="['color']"
/>
<ph-form-color
    label="禁止的颜色"
    v-model="color"                
    :disabled="true"
    :validators="['color']"
/>
<ph-form-datetime
    type="date"
    label="生日"
    v-model="birth"
    :validators="['required']"
/>
<ph-form-select
    label="大学"
    v-model="uni"
    align="center"
    :validators="['required']"
>
    <ph-option
    :value="opt.value"
    v-for="opt in unis"
    :key="opt.value"
    >{{ opt.text }}</ph-option
    >
</ph-form-select>
<ph-form-select
    label="职业"
    v-model="pro"
    placeholder="请选择职业"
    :multiple="true"
    theme="dark"
>
    <ph-option
    :value="opt.value"
    v-for="opt in pros"
    :key="opt.value"
    >{{ opt.text }}</ph-option
    >
</ph-form-select>
<ph-form-checkbox
    label="读过的小学"
    v-model="sx"
    
    :validators="['required']"
>
    <ph-checkbox-item
    v-for="item in sxs"
    :value="item.value"
    :key="item.value"
    >{{ item.text }}</ph-checkbox-item
    >
</ph-form-checkbox>
<ph-form-checkbox
    label="禁止全部选项"
    v-model="sx"
    
    :disabled="true"
>
    <ph-checkbox-item
    v-for="item in sxs"
    :value="item.value"
    :key="item.value"
    >{{ item.text }}</ph-checkbox-item
    >
</ph-form-checkbox>
<ph-form-checkbox
    label="禁止某一个"
    v-model="sx"
>
    <ph-checkbox-item
    :disabled="item.value == 2"
    v-for="item in sxs"
    :value="item.value"
    :key="item.value"
    >{{ item.text }}</ph-checkbox-item
    >
</ph-form-checkbox>
<ph-form-textarea
    label="个人介绍"
    placeholder="我想起那天夕阳下的蹦跑。。。"
    :limit="10"
    v-model="intro"
    :validators="['required']"
    
/>
<ph-button-group :container="true" dir="col">
    <ph-button type="primary" @click="onSubmit">获取数据</ph-button>
</ph-button-group>
</ph-validator>
</ph-form>

`;
